<template>
    <el-container class="layout-container-demo" style="height: 900px">
      <el-aside  id="aside"  :style="{ width: asideWidth + 'px'}" >   <!-- 动态限制宽度,加了就会有下拉的箭头 -->
         <el-scrollbar >   <!-- 侧边栏滑动条 --> 
             <el-menu :default-active="activeIndex" class="el-menu-vertical-demo"   :collapse="isCollapse" :collapse-transition="false" > <!--:collapse-transition="false" 关掉折叠过度效果,也可以自定义-->
        <el-sub-menu v-for="item in menuItems" :index="item.index" :key="item.index">
            <template #title>
             <el-icon :class="item.iconClass"><HelpFilled /></el-icon>
                <!-- <el-icon :class="item.iconClass"><{{item.iconClass}} /></el-icon> -->
             <span>  {{ item.label }}</span>
        </template>  
          <template v-if="item.children">
            <el-menu-item v-for="child in item.children" :index="child.index" :key="child.index" @click="$router.push(child.router)"  >
            <el-icon :class="item.iconClass"><Setting /></el-icon>
              {{ child.label }}
            </el-menu-item>
          </template>
        </el-sub-menu>
      </el-menu>
        </el-scrollbar>
      </el-aside>
  
      <el-container>
        
        <el-header style="text-align: left; font-size: 15px">
            
          <div class="toolbar">
            
            <el-radio-group v-model="isCollapse"  >
            <el-radio-button :value="false"@click="zhank()">展开</el-radio-button>
            <el-radio-button :value="true" @click="zhed()">折叠</el-radio-button>
            </el-radio-group>
            

            <el-dropdown style="text-align: right; font-size: 15px;padding-left: 1500px; ">
              <el-icon style="margin-right: 12px; margin-top: 2px; ">
                <setting />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>注销</el-dropdown-item>
                  <el-dropdown-item>退出</el-dropdown-item>
                  <el-dropdown-item>更换头像</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>Tom</span>
          </div>
        </el-header>
  
        <el-main style="background-color: beige;">
            <router-view :v-if="isRouteLoaded"></router-view>
        </el-main>
      </el-container> 
    </el-container>
  </template> 
  
  <script lang="ts" setup>
  import { ref,reactive } from 'vue'
  import { Menu as IconMenu, Message, Setting, User, HelpFilled } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router';   // npm install vue-router@4  没有的话安装下
  import { RouterView,RouterLink } from 'vue-router';  
  const router = useRouter(); // 获取路由
  const isCollapse = ref(false); //控制菜单栏的展开折叠变量
  const activeIndex = ref('1');
  let asideWidth = ref(150); // 侧边栏的宽度 
  const isRouteLoaded = ref(false);  //

  //折叠控制边框宽度
  function zhed(){
    asideWidth.value = 60;
  }

   //折叠控制边框宽度
   function zhank(){
    asideWidth.value = 150;
}
  
  const item = {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }

  // 路由主页面
  const goMain=(path: string)=> {
    
    //router.push(path);
  }
   

  const tableData = ref(Array.from({ length: 10 }).fill(item))

  const menuItems = ref([
  { 
    index: '1', 
    label: '用户管理',
    iconClass: 'el-icon-user',
    router:'/user', 
    children: [
      { index: '1-1', label: '用户列表', iconClass: 'el-icon-list' , router:'/user' },
      { index: '1-2', label: '用户添加', iconClass: 'el-icon-plus' , router:'/adduser'}
    ]
  },
  { 
    index: '2', 
    label: '订单管理',
    iconClass: 'el-icon-order',
    router:'/user', 
    children: [
      { index: '2-1', label: '订单列表', iconClass: 'el-icon-document' , router:'/user' },
      { index: '2-2', label: '订单详情', iconClass: 'el-icon-info' , router:'/user' }
    ]
  },
  { 
    index: '3', 
    label: '商品管理',
    iconClass: 'el-icon-goods',
    router:'/user', 
    children: [
      { index: '3-1', label: '商品列表', iconClass: 'el-icon-goods-list'  , router:'/user'},
      { index: '3-2', label: '商品列表', iconClass: 'el-icon-goods-list' , router:'/user' },
      { index: '3-3', label: '商品列表', iconClass: 'el-icon-goods-list' , router:'/user' },
      { index: '3-4', label: '商品列表', iconClass: 'el-icon-goods-list' , router:'/user' },
      { index: '3-5', label: '商品列表', iconClass: 'el-icon-goods-list' , router:'/user' },
      { index: '3-6', label: '商品添加', iconClass: 'el-icon-plus-square'  , router:'/user'}
    ]
  },
  { 
    index: '4', 
    label: '会员管理',
    iconClass: 'el-icon-goods',
    router:'/user', 
    children: [
      { index: '4-1', label: '新增会员', iconClass: 'el-icon-goods-list' , router:'/user' },
      { index: '4-2', label: '新增会员', iconClass: 'el-icon-goods-list' , router:'/user' },
      { index: '4-3', label: '新增会员', iconClass: 'el-icon-goods-list' , router:'/user' },
      { index: '4-4', label: '新增会员', iconClass: 'el-icon-goods-list' , router:'/user' },
      { index: '4-5', label: '删除会员', iconClass: 'el-icon-plus-square' , router:'/user' }
    ]
  },
]);

  let items = ref({})

  function dianji(name){
        alert(name);    

  }

  




  </script>
  
  <style scoped>
  .layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
  }
  .layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
  }
  .layout-container-demo .el-menu {
    border-right: none;
  }
  .layout-container-demo .el-main {
    padding: 0;
  }
  .layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
    width: auto;
  }
  </style>
  